رویداد ( ) hover در jQuery
در این بخش از آموزش JQuery ، رویداد hover را در طراحی سایت شرح میدهیم.
رویداد ( ) hover
، دو تابع را تعیین می کند که در هنگام عبور موس از روی عنصر مورد نظر ،
اجرا می شوند . تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در
هنگام خروح عنصر از روی عنصر اجرا می شود .
این رویداد هر دو رویداد mouseenter و رویداد mouseleave را فعال می کند .
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).hover ( inFunction , outFunction ) ;
رویداد ( ) mouseup در jQuery
در این بخش از آموزش JQuery ، رویداد mouseup را در طراحی سایت شرح میدهیم.
رویداد mouseup زمانی اتفاق می افتد که دکمه فشرده شده موس را بر روی عنصر مورد نظر ، رها دهید .
رویداد mouseup می تواند دو کار را انجام دهد :
1 - باعث رخ دادن رویداد mouseup برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :
$ ( " selector " ).mouseup ( ) ;
رویداد ( ) mousedown در jQuery
در این بخش از آموزش JQuery ، رویداد mousedown را در طراحی سایت شرح میدهیم.
رویداد mousedown زمانی اتفاق می افتد که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید .
رویداد mousedown می تواند دو کار را انجام دهد :
1- باعث رخ دادن رویداد mousedown برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :
$ ( " selector " ).mousedown ( ) ;
رویداد mouseleave در jQuery
در این بخش از آموزش JQuery ، رویداد mouseleave را در طراحی سایت شرح میدهیم.
رویداد mouseleave زمانی اتفاق می افتد که اشاره گر ماوس محتوای تگ html ترک می کند .
شکل کلی استفاده از این متد به شرح زیر است :
$(selector).mouseleave(function)
رویداد mouseenter در jQuery
در این بخش از آموزش JQuery ، رویداد mouseenter را در طراحی سایت شرح میدهیم.
رویداد mouseenter زمانی اتفاق می افتد که اشاره گر ماوس وارد محتوای تگ html می شود.
شکل کلی استفاده از این متد به شرح زیر است :
$(selector).mouseenter(function)
رویداد ( ) dblclick در jQuery
در این بخش از آموزش JQuery ، رویداد dblclick را در طراحی سایت شرح میدهیم.
رویداد dblclick زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر دابل کلیک نماید . با رویداد dblclick برای مثال می توان کدی طراحی کرد که در هنگام دابل کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).dblclick ( function ( ) { ... some code ... } ;
رویداد ( ) click در jQuery
در این بخش از آموزش JQuery ، رویداد click را در طراحی سایت شرح میدهیم.
رویداد click
زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این
رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک
عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).click ( function ( ) { ... some code ... } ;
selector : selector کنترلی است که کاربر بر روی آن کلیک می کند .
function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .
رویداد ( ) ready در jQuery
در این بخش از آموزش JQuery ، رویداد ready را در طراحی سایت شرح میدهیم.
رویداد ( ) ready در یک صفحه وب زمانی اتفاق می افتد که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن ) .شما می توانید رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه ، اجرا شوند را در این تابع قرار دهید .
انتخاب گر ها در جی کوئری (Jquery Selectors)
سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون‌ها) در جی کوئری بکار میرود. برای انتخاب یه عنصر HTML به صورت مستقیم میتوانیم آن را فراخوانی کنیم.
انتخاب همه عناصر (*)
$(*).hide()
با کد زیر میتوانید همه عناصر صفحه رو فراخوانی کنید.در این مثال همه عناصر با کلیک شدن ، hide میشوند.
قواعد دستوری جیکوئری ( Jquery )
با قواعد دستوری جیکوئری شما میتوانید عناصر HTML را انتخاب کنید و عملیات مورد نظر خود را بر روی آنها انجام دهید.
ساختار اصلی یک دستور جیکوئری :
$(selector).action()
$ : برای دسترسی به جیکوئری به کار میرود.
برای اینکه بتوانیم از امکانات jquery استفاده کنیم بایستی آخرین نسخه کتابخانه jquery رو از سایت jquery.com دانلود کنیم .
سه مدل برای دانلود وجود دارد :
بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .
طریق نصب جی کوئری به دو صورت inline و external می باشد.
اما نحوه نوشتن کدها نیز به همین دو روش میباشد :
تعداد صفحات : 4
تگ لینک ( تگ Link )